<template>
	<view>
		<u-navbar :title="$t('我的订单')" :border-bottom="false"></u-navbar>
		<u-sticky :enable="enable">
			<u-tabs active-color="#01DFD7" name="cate_name" :list="navList" :is-scroll="false" :current="current"
				@change="change"></u-tabs>
		</u-sticky>
		<!-- 发货状态提示 -->
		<view v-if="current != 3 && orderList.length > 0 && content != null" class="parse-text" style="display: flex">
			<u-icon name="volume-up" color="#fa3534" size="42" style="position: absolute; top: 20rpx" />
			<u-parse :html="content" class="parse-p" style="line-height: 1.7; font-size: 24rpx" />
		</view>
		<view class="orderList">
			<view class="list" v-for="(item, idx) in orderList" :key="idx" @click="details(item)">
				<view class="tit n-flex-row n-justify-between">
					<view class="num">{{$t('订单时间')}}：{{ item.create_time }}</view>
					<view class="state">{{ item.status_text }}</view>
				</view>
				<view class="goods">
					<image :src="item.goods_data.image" mode=""></image>
					<view class="info">
						<view class="gtit">
							{{ item.goods_data.title }}
						</view>
						<view class="peice n-flex-row n-justify-between">
							<view class="p">{{$t('¥')}}{{ Number(item.price).toFixed(2) }}</view>
							<view class="num">x{{ item.number }}</view>
						</view>
					</view>
				</view>
				<view class="total">
					<text class="shu">{{$t('共')}}{{ item.number }}{{$t('件')}} | </text><text style="margin-left: 10rpx;">{{$t('合计')}}：{{$t('¥')}}</text><text
						class="pri">{{ Number(item.order_price).toFixed(2) }}</text>
				</view>
			</view>
		</view>
		<u-empty :text="$t('暂无订单')" :show="show" mode="order" margin-top="400"></u-empty>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navList: [{
				cate_name: this.$t('全部')
			}, {
				cate_name: this.$t('待发货'),
			}, {
				cate_name: this.$t('待收货'),
			}, {
				cate_name: this.$t('已完成'),
			}],
			current: 0,
			orderList: [],
			show: false,
			page: 1,
			enable: true,
			content: ''
		}
	},
	onLoad(option) {
		this.current = option.idx;
		this.getGeneral();
		if (uni.getStorageSync("user")) {
			this.getData()
		}
		uni.$on('uporder', () => {
			console.log("调用");
			this.getData()
		})
	},
	onShow() {
		if (!uni.getStorageSync("user")) {
			uni.redirectTo({
				url:'/pages/my/login'
			})
		}
	},
	// 触底
	onReachBottom() {
		if (this.orderList.length < this.page * 10) {
			return
		}
		this.page++;
		this.getData()
	},
	onUnload() {
		uni.$off('uporder')
	},
	onHide() {
		this.enable = false
	},
	methods: {
		// 物流状态提示
		getGeneral() {
			this.$http({
				url: 'api/common/get_general'
				// data: {
				//   uid: uni.getStorageSync("user").id || 0,
				// },
			}).then((res) => {
				if (res.data.code == 1) {
					let msg = res.data.data.open_pop_goods_content;
					this.content = msg;
				}
			});
		},
		change(index) {
			this.current = index;
			this.orderList = [];
			this.page = 1;
			this.getData()
		},
		details(info) {
			uni.navigateTo({
				url: '/pages/my/orderDetails?order_id=' + info.id
			})
		},
		getData() {
			uni.showLoading({
				title: this.$t('加载中')
			})
			this.$http({
				url: "api/order/get_goods_order",
				data: {
					status: this.current,
					page: this.page
				}
			}).then(res => {
				uni.hideLoading()
				console.log(res);
				if (res.data.code == 1) {
					if (res.data.data.length == 0) {
						this.show = true
					} else {
						this.show = false
					}
					this.orderList = this.orderList.concat(res.data.data);
				} else {
					this.$tip.tip(res.data.msg)
					this.show = true
				}
			}).catch(err => { });
		},
	}
}
</script>

<style>
@import url("../../../static/css/order.css");
</style>